<template>
  <div class="order">
    <div class="collectListT">
      <div class="collectSin flex" v-for="(item,index) in flowList" :key="index">
        <div>
          <el-image :src="item.shop.shopUrl" style="width: 240px;height: 180px"></el-image>
        </div>
        <div class="titleCon">
          <div class="title">{{item.shop.title}}</div>
          <div class="content">{{item.shop.content}}</div>
          <div class="tag">
            <el-tag type="danger" size="mini">{{item.lity.listType}}成新</el-tag>
          </div>
          <div class="time" v-if="collectType == 0">收藏时间：{{item.creatTime}}</div>
          <div class="time" v-if="collectType == 1">下单时间：{{item.creatTime}}</div>
          <div class="time" v-if="collectType == 1">更新时间：{{item.updateTime}}</div>
        </div>
        <div style="position: absolute;top: 10px;right: 15px" v-if="collectType != 0">
          <el-tag v-if="item.orderType == 1">下单</el-tag>
          <el-tag type="success" v-if="item.orderType == 2">发货</el-tag>
          <el-tag type="info" v-if="item.orderType == 3">完成</el-tag>
          <el-tag type="warning" v-if="item.orderType == 4">用户取消</el-tag>
          <el-tag type="danger" v-if="item.orderType == 5">商家取消</el-tag>
          <el-tag v-if="item.orderType == 6">用户评论</el-tag>
          <el-tag type="success" v-if="item.orderType == 7">商家评论</el-tag>
          <el-tag type="info" v-if="item.orderType == 8">申请退货</el-tag>
          <el-tag type="warning" v-if="item.orderType == 9">退货中</el-tag>
          <el-tag type="danger" v-if="item.orderType == 10">不同意退货</el-tag>
          <el-tag v-if="item.orderType == 11">退货成功</el-tag>

          <el-tag effect="plain" type="info" v-if="item.shop.shopSold == true" style="margin-left: 15px">该商品已下架</el-tag>
          <el-tag effect="plain" type="warning" v-if="item.shop.shopNum == item.shop.shopBuy" style="margin-left: 15px">该商品已买完</el-tag>
        </div>
        <div class="collectBotton" v-if="collectType == 0">
          <el-button type="primary" @click="deleteClick(item.shopId)">去购买</el-button>
          <el-button type="danger" @click="deleteClick(item.id)">取消收藏</el-button>
        </div>
        <div class="collectBotton" v-if="collectType == 1">
          <el-button type="primary" v-if="item.orderType >= 3 && item.shop.shopNum != item.shop.shopBuy" size="mini" @click="shopClick(item.shopId)">再来一单</el-button>
          <el-button type="danger" size="mini" v-if="item.orderType < 3" @click="orderCl(item.id,4,item.shopId)">取消订单</el-button>
          <el-button type="success" size="mini" v-if="item.orderType == 2" @click="orderCl(item.id,3,item.shopId)">完成</el-button>
          <el-button type="success" size="mini" v-if="item.orderType == 3" @click="commentClick(item.id,item.shopId,item.userId)">评论</el-button>
          <el-button type="danger" size="mini" v-if="item.orderType == 6 || item.orderType == '3' || item.orderType == 7" @click="orderCl(item.id,8,item.shopId)">退货</el-button>
        </div>

        <div class="collectBotton" v-if="collectType == 2">
<!--          <el-button type="primary" v-if="item.orderType >= 3 && item.shop.shopNum != item.shop.shopBuy" size="mini" @click="shopClick(item.shopId)">再来一单</el-button>-->
          <el-button type="danger" size="mini" v-if="item.orderType < 3" @click="orderCl(item.id,4,item.shopId)">取消订单</el-button>
          <el-button type="success" size="mini" v-if="item.orderType == 1" @click="orderCl(item.id,2,item.shopId)">发货</el-button>
<!--          <el-button type="success" size="mini" v-if="item.orderType == 3" @click="orderCl(item.id,item.shopId,item.userId)">评论</el-button>-->
<!--          <el-button type="danger" size="mini" v-if="item.orderType == 6 || item.orderType == '3' || item.orderType == 7" @click="orderCl(item.id,8,item.shopId)">退货</el-button>-->
        </div>
      </div>
    </div>


    <el-dialog title="客户评论" :visible.sync="commentShow" width="50%"
               @close="commentClosed">
      <el-descriptions :column="1" size="medium" border>
        <el-descriptions-item>
          <template slot="label">
            商品名称
          </template>
          {{orderList.shop.title}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            商品质量
          </template>
          <el-tag>
            {{orderList.lity.listType}}成新
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            商品图片
          </template>
          <el-image
            style="width: 80px; height: 80px;border: 1px dashed #d9d9d9;border-radius: 6px;margin-right: 5px"
            :src="item"
            fit="cover" v-for="(item,index) in orderList.shop.shopUrl" :key="index" :preview-src-list="list"></el-image>
        </el-descriptions-item>
      </el-descriptions>

      <el-form :model="form" label-width="70px" style="margin-top: 20px">
        <el-form-item label="商品评分" prop="content">
          <el-rate v-model="form.score"></el-rate>
        </el-form-item>
        <el-form-item label="商品描述" prop="content">
          <el-input type="textarea" v-model="form.content" rows="5"></el-input>
        </el-form-item>
        <el-form-item label="商品图片" prop="userUrl">
          <el-upload
            action="http://localhost:9000/eduoss/imgFile"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleAvatarSuccess1"
            :before-upload="beforeAvatarUpload"
            :file-list="form.fileList"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
              <el-button @click="commentShow = false">取 消</el-button>
              <el-button type="primary" @click="commentSumbit">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: 'Order',
  props: {
    flowList: {
      type: Array,
    },
    //收藏
    collectType: {
      type: Number,
      default: 0
    }
  },
  data() {
    return{
      src:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      commentShow: false,
      orderList: {
        user:{},
        uuser:{},
        lity: {
          listType: '十'
        },
        shop:{
          title: ''
        }
      },
      form:{
        score: 0,
        content: '',
        fileList:[]
      },
      fileImage:[],
      picList:[],
      list:[],
    }
  },
  methods:{
    deleteClick(index){
      this.$emit("deleteCl",index)
    },
    orderCl(id, index, shopId){
      this.$emit("orderClick",{id, index, shopId})
    },
    shopClick(id){
      this.$router.push({
        // path: `/front/ShopXQ/${index}`,
        name: 'ShopXQ',
        params:{
          id: id
        }
      })
    },
    async commentClick(id,shopId,userId){
      let dataId = {
        id: id
      }
      let dataSU = {
        shopId: shopId,
        userId: userId,
        orderId: id
      }
      const { data: res } = await this.$http.post('order/getOrderId', dataId);
      if (res.flag == '200') {
        let serve = res.orderList
        if(serve.shop.shopUrl.indexOf("<<tupian>>") > 0){
          serve.shop.shopUrl = serve.shop.shopUrl.split("<<tupian>>")
          // console.log(index)
        }else{
          serve.shop.shopUrl = serve.shop.shopUrl.split("<<tupian>>")
        }
        this.orderList = serve
      }
      this.commentShow = true
    },
    commentClosed(){},
    async commentSumbit(){
      let that = this
      let user = JSON.parse(window.sessionStorage.getItem('user') || null);
      var file = []
      that.picList.forEach((item, index) => {
        file.push(item.url)
      })
      let dataId = {
        shopId: that.orderList.shopId,
        userId: user.id,
        orderId: that.orderList.id,
        sellerId: that.orderList.userId,
        content: that.form.content,
        score: that.form.score,
        commentUrl: file.join("<<tupian>>")
      }
      const { data: res } = await this.$http.post('comment/addComment', dataId)
      if (res.flag == '200') {
        this.$message.success('评论成功');
        this.commentShow = false
        that.orderCl(that.orderList.id,7,that.orderList.shopId)
      } else {
        this.$message.error('评论失败');
      }
    },


    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPng = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 5;

      if (!isJPG && !isPng) {
        this.$message.error('上传图片只能是 JPG或png 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 5MB!');
      }
      return (isJPG || isPng) && isLt2M;
    },
    handleRemove(file, fileList) {
      let that = this;
      if (fileList.length > 0) {
        var currentfileList = [];
        fileList.forEach((item, index) => {
          if (item.response) {
            let obj = {
              url: item.response.collectNum
            };
            currentfileList.push(obj);
          } else {
            let link = item.url;
            let obj = {
              url: link
            };
            currentfileList.push(obj);
          }
        });
        that.picList = currentfileList;
      } else {
        that.fileImage = [];
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    /**
     * 清空上传组件
     */
    emptyUpload() {
      const mainImg = this.$refs.upload;
      if (mainImg) {
        if (mainImg.length) {
          mainImg.forEach(item => {
            item.clearFiles();
          });
        } else {
          this.$refs.upload.clearFiles();
        }
      }
    },
    handleAvatarSuccess1(res, file, fileList) {
      // this.imageUrlU = res.collectNum;
      // console.log(res,file,fileList)
      let that = this;
      let currentFile = [];
      fileList.forEach((item, index) => {
        if (item.response) {
          let obj = {
            url: item.response.collectNum
          };
          currentFile.push(obj);
        } else {
          let link = item.url;
          let obj = {
            url: link
          };
          currentFile.push(obj);
        }
      });
      this.picList = currentFile;
    },
  }
};
</script>

<style lang="less" scoped>
.order{
  .collectListT{
    display: flex;
    align-items: center;
    flex-direction: column-reverse;
    .collectSin{
      margin-top: 15px;
      width: 50%;
      border: 1px solid #dddddd;
      border-radius: 8px;
      padding: 10px 20px;
      position: relative;
      .titleCon{
        margin-left: 15px;
        .title{
          font-size: 24px;
          font-weight: 600;
        }
        .content{
          margin-top: 5px;
          color: #8c939d;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .tag{
          margin-top: 5px;
        }
        .time{
          margin-top: 5px;
          color: #8c939d;
        }
      }
      .collectBotton{
        position: absolute;
        bottom: 10px;
        right: 15px;
      }
    }
  }
}
</style>
